<!--
 * @Author: nns4
 * @Date: 2020-12-11 10:32:38
 * @LastEditors: nns4
 * @FilePath: /studyNote/vue/src/views/test/sendInfo/prop/prop.vue
 * @Description:  prop父组件
-->
<template>
    <div class="father">
        <h2>子组件虽然不能直接对父组件prop进行重新赋值，但是当父组件是引用类型的时候，子组件可以修改父组件的props下面的属性。</h2>
        <div class="father border">
            <input type="text" v-model="fatherSay"> <button @click="对子组件说()">对子组件说</button>
            <p>子组件对我说--{{子组件说}}</p>
            <son @子组件emit="(e)=>{子组件说=e}" style="margin-top:20px" :子组件prop='子组件prop' />
        </div>
    </div>
</template>

<script>
    import son from "./component/son"
    export default {
        components: {
            son
        },
        data() {
            return {
                fatherSay: "",
                父组件说: "",
                子组件说: "",
                子组件prop: ""
            }
        },
        methods: {
            对子组件说() {
                this['子组件prop'] = this.fatherSay;

                //  this['子组件prop'] = {say:this.fatherSay}; //prop引用类型可以改，prop基础类型不能改
            },
        }

    }
</script>

<style lang="less" scoped>
    .father {
        padding: 20px;
    }

    .border {
        border: 1px solid black;
        height: 400px;
    }
</style>